<template>
    <div class="loginTotal">
        <div class="cardDiv">
            <div class="cardIn">
                <div class="cardTitle">欢&nbsp;迎&nbsp;登&nbsp;录</div>
                <el-form :model="userForm" ref="userForm" class="formDiv" :rules="formRules">
                    <el-form-item label="" prop="userName">
                        <el-input v-model="userForm.phone" class="inInput" placeholder="请输入用户名">
                            <i slot="prefix" style="font-weight: 550;" class="el-icon-user"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model="userForm.password" type="password" class="inInput" placeholder="请输入密码">
                            <i slot="prefix" style="font-weight: 550;" class="el-icon-lock"></i>
                        </el-input>
                    </el-form-item>
                    <el-button round class="loginBtn" @click="subLogin">登录</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'loginView',
    data() {
        return {
            userForm: {
                phone: '',
                password: ''
            },
            formRules: {
                phone: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        subLogin() {
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.$api.inLogin(this.userForm).then(res => {
                        console.log(res);

                        // if (res.code=='0') {
                        this.$message.success({
                            message: res.msg,
                            duration: 500
                        });
                        sessionStorage.setItem('isLoggedIn', 'true');
                        sessionStorage.setItem('username', res.data.user_name);
                        sessionStorage.setItem('userId', res.data.id);
                        sessionStorage.setItem('userImg', res.data.portrait_photo);

                        setTimeout(() => { this.$router.push('/'); }, 1000)

                    }).catch(error => {
                        this.$message.error(error.message);
                    });
                    // sessionStorage.setItem('isLoggedIn', 'true');
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.loginTotal {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    // background: linear-gradient(to bottom, rgb(1, 44, 131), rgb(178, 212, 247), );
    background-image: url('../assets/login.jpg');
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .cardDiv {
        width: 400px;
        height: 420px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff4d;

        .cardIn {
            width: 330px;
            height: 350px;
            background: #fff;
            border-radius: 20px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .cardTitle {
                font-size: 28px;
                color: #333;
                font-family: 'Arial';
            }

            .formDiv {
                margin-top: 30px;

                /deep/.el-input__prefix {
                    color: #409EFF;
                    font-size: 20px;
                    font-weight: 500 !important;
                }

                .inInput {
                    width: 300px;
                }

                /deep/.el-input__inner {
                    border-radius: 14px !important;
                }

                .loginBtn {
                    width: 300px;
                    color: #fff;
                    background: linear-gradient(to right, rgb(134, 222, 238), #409EFF, rgb(61, 139, 218));
                }

                /deep/.el-button:active {
                    border-color: #fff;
                }
            }

            // .bottomDiv{
            //     width: 100%;
            //     margin-top: 30px;
            //     border: 1px solid red;
            // }
        }
    }
}
</style>